<template>
  <div class="app">
      <h2>School传给我的学校名字是:{{schoolName}}</h2> 
      <h2>School传给我的学校名字是:{{schoolAddress}}</h2> 
      <!--  给组件实例对象（vc）绑定自定义事件的第一种方式（常用）  -->
      <!-- <School @atguigu="getName"/> -->
      <!-- 给组件实例对象（vc）绑定自定义事件的第二种方式（常用） -->
	  <School ref="schoolName" />
      <Student/>
  </div>
</template>

<script>
    import School from './components/School'
    import Student from './components/Student'
    export default {
        name: 'App',
        components:{
            School,
            Student
        },
        data() {
            return {
                schoolName:'',
                schoolAddress:''
            }
        },
        // 给组件实例对象（vc）绑定自定义事件的第一种方式（常用） 
        // methods:{
        //     getName(val){
        //         this.schoolName = val;
        //     }
        // }
        // 给组件实例对象（vc）绑定自定义事件的第二种方式（常用）
        mounted(){
            this.$refs.schoolName.$on('haha',(val)=>{
                this.schoolName = val;
            })
            this.$refs.schoolName.$on('heihei',(val)=>{
                this.schoolAddress = val;
            })
        }
    }
</script>

<style>
    .app{
        background-color: gray;
        padding: 60px;
    }
</style>